<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>barDemo</title>
    <script src="../js/chart.min.js"></script>
</head>
<body>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart1"></canvas>
</div>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart2"></canvas>
</div>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart3"></canvas>
</div>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart4"></canvas>
</div>
<script>
    var ctx1 = document.getElementById('myChart1').getContext('2d');
    var myChart1 = new Chart(ctx1, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '垂直柱状',
                data: [12, 19, 3, 5, 2, 3],
                borderColor: 'blue',
                borderWidth: 1,
                fill: false,
            }]
        },
        options: {
            tooltips: {
                intersect: false,
                mode: 'index'
            }
        }
    });
    var ctx2 = document.getElementById('myChart2').getContext('2d');
    var myChart2 = new Chart(ctx2, {
        type: 'horizontalBar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '水平柱状',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'blue',
                backgroundColor: 'skyBlue',
                borderWidth: 1,
            }]
        }
    });
    var ctx2 = document.getElementById('myChart2').getContext('2d');
    var myChart2 = new Chart(ctx2, {
        type: 'horizontalBar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '水平柱状',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'blue',
                backgroundColor: 'skyBlue',
                borderWidth: 1,
            }]
        }
    });
    var ctx3 = document.getElementById('myChart3').getContext('2d');
    var myChart3 = new Chart(ctx3, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                },
            ]
        }
    });
    var ctx4 = document.getElementById('myChart4').getContext('2d');
    var myChart4 = new Chart(ctx4, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    yAxisID: 'y-axis-2',
                },
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],
            }
        }
    });
</script>
</body>
</html>
